<!--  -->
<template>
  <div class="page-wrap test-doc">
    TestDoc组件
    <van-divider>选择人员组件</van-divider>
    <DialogContact ref="contactSelect" :user.sync="list" @cb="getVal" />
    <div v-for="item in list " :key="item.UserId">{{item.UserName}}</div>
    <div>----------------------------------------------------</div>

    <van-divider>选择城市组件</van-divider>

    <van-button class="jw-primary-btn" block @click="areaShow=true">块级按钮选择地区</van-button>
    <van-popup v-model="areaShow" position="bottom" :style="{ height: '30%' }">
      <van-area title="选择城市" :area-list="areaList" :columns-num="2" @cancel="areaClose"  @confirm="areaConfirm" />
    </van-popup>
    {{areaVal}}
    <div>----------------------------------------------------</div>

    <van-divider>选择年月日时间组件</van-divider>

    <van-button class="jw-primary-btn" @click="timeShow=true">普通按钮选择时间</van-button>
    <van-popup v-model="timeShow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        :formatter="dateTimeFormatter"
        title="选择完整时间" @cancel="timeClose"  @confirm="timeConfirm" />
    </van-popup>
    {{tools.getDateHasTime(currentDate)}}

    <div>----------------------------------------------------</div>






  </div>
</template>

<script>
import {tools} from '@/utils/tools'

import {DialogContact} from '@/components'

// 省市区
import { areaList } from '@vant/area-data';


export default {
  name: 'TestDoc',
  data() {
    return {
      tools,
      // 人员
      list:[],
      // 省市区
      areaList,
      areaShow: false,
      areaVal:[],

      // 时间
      currentDate: new Date(),
      timeShow: false,

    };
  },
  //组件
  components: {
    DialogContact,
  },
  //在实例创建完成后被立即调用
  created: function () {},
  //计算属性  将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
  computed: {},
  //dom 加载完后执行
  mounted: function () {},
  //方法
  methods: {
    // 选择人员的值
    getVal(v){
      this.list = v
    },
    // 省市区 
    areaClose() {
      this.areaShow = false;
    },
    // 省市区 选中值 
    areaConfirm(v){
      console.log(v)
      this.areaVal = v
      this.areaShow = false;
    },
    // 时间日期 
    timeClose() {
      this.timeShow = false;
    },
    dateTimeFormatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      if (type === 'hour') {
        return val + '时';
      }
      if (type === 'minute') {
        return val + '分';
      }
      return val;
    },
    // 时间日期 选中值 
    timeConfirm(v){
      console.log(v,tools)
      this.currentDate = v
      this.timeShow = false;
    },










  },
  //一个对象，键是需要观察的表达式，值是对应回调函数
  watch: {},
};
</script>


<style scoped lang="less">
  @import './test-doc.less';
</style>
